<template>
    <a-button type="outline" status="warning" @click="handleClick">AI 生成题目</a-button>
    <a-drawer :width="340" :visible="visible" @ok="handleOk" @cancel="handleCancel" unmountOnClose>
        <template #title>
            AI 生成题目
        </template>
        <a-form :model="form"
                label-align="left"
                auto-label-width
                @submit="handleSubmit">
            <a-form-item label="应用 id">
                {{appId}}
            </a-form-item>
            <a-form-item field="questionNumber" label="题目数量">
                <a-input
                        v-model="form.questionNumber"
                        placeholder="请输入题目数量"
                />
            </a-form-item>

            <a-form-item field="optionNumber" label="选项数量">
                <a-input v-model="form.optionNumber" placeholder="请输入选项数量" />
            </a-form-item>

            <a-form-item>
                <a-space size="medium">
                    <div>
                        <a-button :loading="submitting" type="primary" html-type="submit" style="width: 100px;margin-top: 24px">
                            {{submitting ? "生成中" : "一键生成"}}
                        </a-button>
                    </div>
                    <div>
                        <a-button :loading="submitting" type="outline" status="warning" style="width: 100px;margin-top: 24px" @click="doSSESumbit">
                            {{submitting ? "生成中" : "实时生成"}}
                        </a-button>
                    </div>
                </a-space>
            </a-form-item>
        </a-form>
    </a-drawer>
</template>

<script setup lang="ts">
    import {ref,reactive} from 'vue';
    import {aiGenerateQuestionUsingPost} from "@/api/questionController";
    import message from "@arco-design/web-vue/es/message";


    const visible = ref(false);

    const handleClick = () => {
        visible.value = true;
    };
    const handleOk = () => {
        visible.value = false;
    };
    const handleCancel = () => {
        visible.value = false;
    }

    //获取前页面跳转过来的参数
    interface Props {
        appId:string
        //将ai生成的题目传递给父组件
        onSuccess:(result:API.QuestionContentDTO[]) => void
        //将实时生成的题目和开始生成，结束生成传给父组件
        onSEESuccess:(result:API.QuestionContentDTO) => void
        onSSEStart:(event:any) => void
        onSSEClose:(event:any) => void
    }
    const props = withDefaults(defineProps<Props>(),{
        appId:() =>{
            return "";
        }
    })

    const form = reactive<API.AIGeneratorQuestionRequest>({
        optionNumber: 3,
        questionNumber: 10
    })

    //等待显示
    const submitting = ref(false);

    //一键生成提交
    const handleSubmit = async () =>{
        if(!props.appId){
            return;
        }
        submitting.value = true;
        const res = await aiGenerateQuestionUsingPost({
            appId:props.appId as any,
            ...form
        });
        if(res.data.code === 0 && res.data.data){
            props.onSuccess(res.data.data)
            message.success("生成成功!")
            //关闭抽屉
            handleCancel();
        }else{
            message.error("生成失败!")
        }
        submitting.value = false;
    }

    //实时生成 SSE提交
    const doSSESumbit = async () =>{
        if(!props.appId){
            return;
        }
        message.success("AI加载请稍等。。。")
        submitting.value = true;
        //注意sse向后端发请求不能使用axios，注意需要填写后端完成路径
        const eventSource = new EventSource("http://8.134.201.97:8085/api/question/ai_generate/see" + `?appId=${props.appId}&questionNumber=${form.questionNumber}&optionNumber=${form.optionNumber}`);
        //接收信息
        eventSource.onmessage = function (event) {
            console.log(event.data)
            //将题目发送给父组件
            props.onSEESuccess?.(JSON.parse(event.data));
        }
        //报错或连接失败报错
        eventSource.onerror = function (event) {
            if(event.eventPhase === EventSource.CLOSED){
                console.log("关闭连接");
                eventSource.close();
                props.onSSEClose(event)
            }
        }
        eventSource.onopen = function(event){
            console.log("建立连接")
            props.onSSEStart(event);
            //开始实时生成题目,关闭抽屉
            handleCancel()
        }
        submitting.value = false;
    }
</script>

<style scoped>

</style>